<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车弹窗</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/cart_pop.css">
</head>

<body>
    <!-- 头部部分 -->
    <div class="big">
        <div class="head-big">
            <div class="head">
                <!-- 头部logo -->
                <img class="img-logo" src="../项目/imgs/logo_files/logo.png" alt="">
                <!-- 头部导航 -->
                <div class="header">
                    <ul class="head-c">
                        <li class="head-item">首页</li>
                        <li class="head-item">女装</li>
                        <li class="head-item">男装</li>
                        <li class="head-item">箱包</li>
                        <li class="head-item">服饰</li>
                    </ul>
                </div>




                <!-- 我的购物车框 -->
                <div class="search-area">
                    <input type="text" class="input-search" placeholder="我的购物车">
                    <span class="number">11</span>
                    <div class="cart_pop">
                        <ul class="cart_pop_list">
                            <li class="list_iteam">
                                <a href="https://www.w3school.com.cn/" class="link_img"></a>
                                <a href="https://www.w3school.com.cn/" class="text">女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</a>
                                <p class="product_price">¥699 <span
                                    style="font-size: 14px;color: #333;line-height: 20px; ">×1</span> </p>
                                    <p class="product_size">尺码：S 颜色：米色</p>
                                <a href="#" class="link_delete_product">删除</a>
                            </li>
                            <li class="list_iteam">
                                <a href="https://www.w3school.com.cn/" class="link_img"></a>
                                <a href="https://www.w3school.com.cn/" class="text">女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</a>
                                <p class="product_price">¥699 <span
                                    style="font-size: 14px;color: #333;line-height: 20px; ">×1</span> </p>
                                    <p class="product_size">尺码：S 颜色：米色</p>
                                <a href="#" class="link_delete_product">删除</a>
                            </li>
                            <li class="list_iteam">
                                <a href="https://www.w3school.com.cn/" class="link_img"></a>
                                <a href="https://www.w3school.com.cn/" class="text">女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</a>
                                <p class="product_price">¥699 <span
                                    style="font-size: 14px;color: #333;line-height: 20px; ">×1</span> </p>
                                    <p class="product_size">尺码：S 颜色：米色</p>
                                <a href="#" class="link_delete_product">删除</a>
                            </li>
                            <li class="list_iteam">
                                <a href="https://www.w3school.com.cn/" class="link_img"></a>
                                <a href="https://www.w3school.com.cn/" class="text">女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</a>
                                <p class="product_price">¥699 <span
                                    style="font-size: 14px;color: #333;line-height: 20px; ">×1</span> </p>
                                    <p class="product_size">尺码：S 颜色：米色</p>
                                <a href="#" class="link_delete_product">删除</a>
                            </li>
                            <li class="total_product">
                                <span  class="totail">共13件商品</span>
                                <a href="#" class="look_productCart">查看购物车</a>
                            </li>


                        </ul>
                    </div>
                </div>







                
                <!-- 最右边小图案 -->
                <img class="img-right" src="../项目/imgs/logo_files/icon-17.png" alt="">
            </div>
            <!-- 我的订单部分 -->
            <div class="order">
                <p class="order-goods">我的订单</p>
                <div class="search">
                    <input type="text" class="search-order" placeholder="搜索订单/订单编号">
                    <img src="../项目/imgs/logo_files/icon-18.png" class="Search-box" alt="">
                </div>
            </div>
            <!-- 我的订单详细部分 -->
            <div class="order-detail">
                <ul class="detail">
                    <li class="detail-item left">
                        <img class="detail-item-bgc" src="../项目/imgs/logo_files/icon-14.png" alt="">
                        <p class="item-list">待付款</p>
                    </li>
                    <li class="detail-item left">
                        <img class="detail-item-bgc" src="../项目/imgs/logo_files/icon-2.png" alt="">
                        <p class="item-list">待收货</p>
                        <span class="num-2">2</span>
                    </li>
                    <li class="detail-item left">
                        <img class="detail-item-bgc" src="../项目/imgs/logo_files/icon-13.png" alt="">
                        <p class="item-list">待评价</p>
                        <span class="num-3">3</span>
                    </li>
                    <li class="detail-item right">
                        <img class="detail-item-bgc" src="../项目/imgs/logo_files/icon-20.png" alt="">
                        <p class="item-list">退换/售后</p>
                    </li>
                    <li class="detail-item right-1">
                        <img class="detail-item-bgc" src="../项目/imgs/logo_files/icon-3.png" alt="">
                        <p class="item-list">全部订单</p>
                    </li>
                </ul>
            </div>
            <!-- 我的收藏和我的钱包部分 -->
            <di class="bottom">
                <div class="collect">
                    <p class="type">我的收藏</p>
                    <div class="collect-1">
                        <ul class="collect-box">
                            <li class="box-type ">
                                <p class="num-13">13</p>
                                <p class="num-goods">商品收藏</p>
                            </li>
                            <li class="box-type ">
                                <p class="num-13">13</p>
                                <p class="num-goods">系列收藏</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="wallet">
                    <p class="type">我的钱包</p>
                    <div class="collect-2">
                        <ul class="collect-box">
                            <li class="box-type ">
                                <p class="num-3">3张</p>
                                <p class="n-1">优惠券</p>
                            </li>
                            <li class="box-type ">
                                <p class="num-3">0.00元</p>
                                <p class=" n-1">余额</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </di>
        </div>
    </div>
    </div>
</body>

</html>